<template>
  <div class="collect">
    <van-nav-bar title="我的收藏" left-arrow fixed />
    <van-row class="my-header">
      <van-col span="16" class="span">
        {{ $store.state.uname.nick_name }}
      </van-col>
      <van-col span="8">
        <van-image
          round
          width="6rem"
          height="6rem"
          :src="`http://localhost:3000/${this.$store.state.avatar}`"
        />
      </van-col>
    </van-row>
    <!-- <div class="my-card">
      <van-card
        @click="recipe"
        centered
        desc="7.4分 30人做过"
        title="可乐鸡翅"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      >
      </van-card>
      <van-card
        centered
        desc="7.4分 30人做过"
        title="可乐鸡翅"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      >
      </van-card>
      <van-card
        centered
        desc="7.4分 30人做过"
        title="可乐鸡翅"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      >
      </van-card>
      <van-card
        centered
        desc="7.4分 30人做过"
        title="可乐鸡翅"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      >
      </van-card>
      <van-card
        centered
        desc="7.4分 30人做过"
        title="可乐鸡翅"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      >
      </van-card>
      <van-card
        centered
        desc="7.4分 30人做过"
        title="可乐鸡翅"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      >
      </van-card>
    </div> -->
    <!-- <van-tabbar v-model="active">
        <van-tabbar-item name="home" icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item name="search" icon="send-gift-o">市集</van-tabbar-item>
        <van-tabbar-item name="friends" icon="like-o">收藏</van-tabbar-item>
        <van-tabbar-item name="setting" icon="manager-o">我的</van-tabbar-item>
    </van-tabbar> -->
    <myfooter></myfooter>
  </div>
</template>
<script>
export default {
  data() {
    return {
      uname: "zhangsan",
      active: "home",
      user: {
        name: "用户昵称",
        avatar:"",
      },
    };
  },
  methods: {
    recipe() {
      this.$router.push("/recipe?mu_id=1");
    },
  },
  mounted(){
    this.avata=sessionStorage.getItem("avatar")
  },
  watch:{
    avata(){
      this.avata=sessionStorage.getItem("avatar");
      this.updateAvatar(this.avata); 
    }
  }
};
</script>
<style lang="scss">
.collect {
  .my-header {
    margin-top: 4rem;
    margin-bottom: 1rem;
    .span {
      font-size: 2.8rem;
      text-align: center;
      line-height: 6rem;
    }
    .my-card {
      margin-bottom: 3rem;
    }
  }
}
</style>
